<template>

<div class="user_manager">
   <div class="query_form">
        <el-form :inline="true" :model="menuForm" class="demo-form-inline">
    <el-form-item label="菜单名称">
      <el-input v-model="menuForm.menuName"  placeholder="请输入菜单名称" />
    </el-form-item>
    <el-form-item label="菜单状态">
      <el-select v-model="menuForm.menuState" placeholder="正常">
        <el-option label="正常" :value="1" />
        <el-option label="停用" :value="2"  />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
    </div>
    <div class="base_table">
      <div class="action">
        <el-button type="primary" @click="menuAdd(1)">新增</el-button>
      </div>
      <el-table 
      ref="multipleTableRef" 
      :data="menuList" 
      style="width: 100%"
      row-key="_id"
    
      :tree-props="{ children: 'children' }">
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
            :width="item.width"
        >
        </el-table-column>
        <el-table-column label="操作" min-width="120">
          <template #default="scope">
            <el-button type="primary" @click="menuAdd(2,scope.row)">新增</el-button>
            <el-button type="primary" @click="menuEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="menuDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    
    </div>
    <!-- 弹框 -->
     <el-dialog v-model="showModel" title="新增用户" class="addUser">
      <el-form :model="menuForm" ref="dialogForm" :rules="rules">
        <el-form-item label="父级菜单" prop="parentId" label-width="100px">
       <el-cascader v-model="menuForm.parentId" :options="menuList"
         :props="{ checkStrictly: true, value: '_id', label: 'menuName' }"
         clearable
       />
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType" label-width="100px">
        <el-radio-group v-model="menuForm.menuType" >
      <el-radio :label="1" >菜单</el-radio>
      <el-radio :label="2" >按钮</el-radio>
    </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName" label-width="100px">
          <el-input v-model="menuForm.menuName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon" label-width="100px"
        v-show="menuForm.menuType===1">
          <el-input v-model="menuForm.icon" autocomplete="off" />
        </el-form-item>
        <el-form-item label="路由地址" prop="path" label-width="100px"
        v-show="menuForm.menuType===1">
          <el-input v-model="menuForm.path" autocomplete="off" />
        </el-form-item>
        <el-form-item label="组件路径" prop="component" label-width="100px"
        v-show="menuForm.menuType===1">
         <el-input v-model="menuForm.component" autocomplete="off" />
        </el-form-item>
        <el-form-item  label="菜单状态" prop="menuState" label-width="100px"
        v-show="menuForm.menuType===1">
          <el-radio-group v-model="menuForm.menuState" >
      <el-radio :label="1" >菜单</el-radio>
      <el-radio :label="2" >按钮</el-radio>
    </el-radio-group>
        </el-form-item>
           <el-form-item  label="权限标识" prop="menuCode" label-width="100px"
        v-show="menuForm.menuType===2">
        <el-input v-model="menuForm.Code" autocomplete="off" />
         </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </span>
      </template>
    </el-dialog>
</div>
</template>

<script setup>
import api from "./../api"
import {ref,reactive,toRaw,nextTick}from 'vue'
import utils from "./../utils/utiles"
// 定义获取表单节点
const dialogForm=ref(null)
// 定义表单的正则规则
const rules=reactive({
   
        menuName: [
          {
            required: true,
            message: "请输入菜单名称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 10,
            message: "长度在2-8个字符",
            trigger: "blur",
          },
        ],
      

})
// 定义记录用户行为
const action=ref('add')
const menuList=ref([])
// 定义弹窗变量
const showModel=ref(false)
// 定义弹窗方法
const menuAdd=(type,row)=>{
    action.value='add'
    showModel.value=!showModel.value
    if(type==2){
        //点击的是快捷的新增按钮
        //把id放到parentId数组中即可
        console.log(row);
        menuForm.parentId=[...row.parentId,row._id].filter((ele)=>ele)
    }
}
// 定义查询和重置
const query=()=>{
  
  getMenulist()
}
const reset=()=>{
 
  getMenulist()
}
// 定义编辑弹窗的方法
const menuEdit=(row)=>{
    action.value='edit'
    showModel.value=!showModel.value
     nextTick(()=>{
        Object.assign(menuForm,row)
    })
}
// 定义删除弹窗的方法
const menuDel=async(row)=>{
    action.value='delete'
    console.log(row._id)
    let data={_id:row._id,action:action.value}
    await api.menuOperate(data)
getMenulist()
    
}
//定义菜单列表请求参数
let menuForm=reactive(   
{
    parentId:[null],
    menuType:1,
    menuState:1,
}    
)
const getMenulist=async()=>{
   let res=await api.getMenuList(menuForm)
    // console.log(res);
     menuList.value=res
}
getMenulist()
//定义动态列表
const columns = reactive([
  {
    label: "菜单名称",
    prop: "menuName",
    width:"150"
  },
  {
    label: "图标",
    prop: "icon",
  },
  {
    label: "菜单类型",
    prop: "menuType",
    formatter(row, column, value) {
      return {
        1: "菜单",
        2: "按钮",
      }[value];
    },
  },
  {
    label: "权限标识",
    prop: "menuCode",
  },
  {
    label: "路由地址",
    prop: "path",
  },
  {
    label: "组件路径",
    prop: "component",
  },
  {
    label: "菜单状态",
    prop: "menuState",
    formatter(row, column, value) {
      return {
        1: "正常",
        2: "停用",
      }[value];
    },
  },
  {
    label: "创建时间",
    prop: "createTime",
    formatter: (row, column, value) => {
      return utils.formateDate(new Date(value));
    },
  },
]);
// 表单重置方法
const resetForm=()=>{
    dialogForm.value.resetFields()
}
// 定义提交按钮的方法
const handleSubmit=()=>{
    dialogForm.value.validate(async(valid)=>{
        if(valid){
            //发送请求
            //获取menuForm+action发送请求（menuOperate)
            let data=toRaw(menuForm)
            // console.log(data);
            data.action=action.value
            let res=await api.menuOperate(data)
            //重置表单
            resetForm()
            //关闭弹窗
            showModel.value=!showModel.value
            //重新请求数据
            getMenulist()
        }
    })
}
</script>

<style lang="scss" scoped>

</style>